<template>
    <div>
    <img src="https://fishandbearpaw.oss-cn-hangzhou.aliyuncs.com/systemImg/jdlogo.png">
    <el-row>
        <el-col :xs="3" :sm="6" :md="7" :lg="8">&nbsp;</el-col>
        <el-col :xs="16" :sm="12" :md="8" :lg="8">
        <el-container id="register">
            <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="100px">
                <el-form-item label="账号" prop="userName">
                    <el-input type="text" v-model="registerForm.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="registerForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="registerForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                 <el-form-item label="上传头像">
                <el-upload
                     class="avatar-uploader"
                      action="oss-cn-hangzhou.aliyuncs.com"
                      :auto-upload="true"
                     :http-request="upload"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                     </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
                </el-form-item>
            </el-form>
            </el-container>
        </el-col>
</el-row>
    </div>
</template>
<script>
import oss from '../utils/oss'
import VueCropper from 'vue-cropperjs'
export default {
  name: 'Register',
      data() {
      var checkUserName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入账号'));
        }
        else
         callback();
      };
      var checkPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }
        else
         callback();
      };
        var checkRePass = (rule, value, callback) => {
       if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.registerForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
          picUrl:'',
          imageUrl:'',
          registerForm: {
              userName: '',
              pass: '',
              checkPass:'',
        },
        rules: {
          userName: [
            { validator: checkUserName, trigger: 'blur' }
          ],
          pass: [
            { validator: checkPass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: checkRePass, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        var that = this;
        that.$refs[formName].validate((valid) => {
          if (valid) {
              if(that.imageUrl == '' || that.imageUrl == null){
                 that.$message.error('请上传头像');
                 return false;
              }
              else{
                   that.$axios.post('user/register',
                     {userName:that.registerForm.userName,
                     pass:that.registerForm.pass,
                     headPic:that.picUrl  
             }).then(function(res){
               if(res.data.code == 200){
                   that.$message({
                   message: '注册成功',
                   type: 'success'
        });
         that.$router.push({ path:'/login'})
               }
               else
                that.$message.error(res.data.body);
    }).catch(function (error) {
        that.$message.error('请检查网络是否通畅');
    });
              }                   
          } else { 
            that.$message.error('请将表单填写完整');
            return false;
          }
        });
      },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.picUrl = oss.getFileName();
      },
      beforeAvatarUpload(file) {
          this.imageUrl='';
         const isPNG= file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isPNG) {
          this.$message.error('上传头像图片只能是 PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isPNG && isLt2M;
      },
      async upload(option) {
        oss.ossUploadFile(option);    
      },
    }
}
</script>
<style >
body{
  text-align:center;
  background-image: url('https://fishandbearpaw.oss-cn-hangzhou.aliyuncs.com/systemImg/loginBack.jpg');
  background-size: cover;
  background-position: fixed;
  top:0;
  left:0;
  font: 14px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
  color: #4d4d4d;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
}
#register{
    background-image:url('https://fishandbearpaw.oss-cn-hangzhou.aliyuncs.com/systemImg/back2.png');
    background-repeat:no-repeat;
    margin-left:20px;
    padding-top:20px;
    padding-bottom:40px;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
</style>